<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<script src="./bootstrap/js/bootstrap.min.js"></script>
		<script src="./js/jquery-3.6.0.min.js"></script>
	</head>
	<style type="text/css">
		div {
			border: 2px #04414D dotted;
			
		}
		.test{
			height: 6.25rem;
			border: #000000 2px solid;
			display: inline-block;
		}
	</style>
	<body>
		<div class="test">
			aasdfasdf
		</div>
		<div class="test">
			sadfasdfsadf
		</div>
		<div class="test">
			asgasdfsadfsadf
		</div>
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-sm-9 col-xxl-2">1
					<div class="row">
						<div class="col-lg-3 col-sm-9 col-xxl-2">1.1</div>
						<div class="col-lg-3 col-sm-1 col-xxl-8">1.2</div>
						<div class="col-lg-3 col-sm-1 col-xxl-1">1.3</div>
						<div class="col-lg-3 col-sm-1 col-xxl-1">1.4</div>
					</div>
				</div>
				<div class="col-lg-3 col-sm-1 col-xxl-8">2</div>
				<div class="col-lg-3 col-sm-1 col-xxl-1">3</div>
				<div class="col-lg-3 col-sm-1 col-xxl-1">4</div>
			</div> 
		</div>
		<div class="container" style="height: 1000px;">
		  <div class="row align-items-start" style="height:10%;">
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		  </div>
		  <div class="row align-items-center" style="height:70%;">
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		  </div>
		  <div class="row align-items-end" style="height:20%;">
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		    <div class="col">
		      One of three columns
		    </div>
		  </div>
		</div>
	</body>
</html>
